


Snapchat Template for AO3

by RATTLEBONES



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Gen
Language: English
Status: Completed
Published: 2020-10-03
Updated: 2020-10-03
Packaged: 2021-03-08 01:14:30
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 942
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/26777200
Author URL: https://archiveofourown.org/users/RATTLEBONES/pseuds/RATTLEBONES
Summary: This is a tutorial on how to create Snapchat templates for AO3.
Comments: 1
Kudos: 11
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works





	Snapchat Template for AO3

  
  
Team 7   


14 june, 2019

sakura  
hello everyone!  
  
naruto  
sakura-chan, see we're perfect for each other!  
  
  
kakashi  
did you just cut me off?!  
  
sasuke  
hmpf  
  


20 june, 2019

naruto  
i-i didn't mean to kakashi-sensei!  


# Step 1: Import the Workskin

Workskins are pieces of code (stylesheets) that allow you to change the formatting of your work. Go to [My Dashboard] > [Skins] > [My Work Skins] > [Create Work Skin]. In the CSS area, paste this:
    
    
    #workskin .snp-box {
      max-width: 500px;
      min-width: 300px;
      float: center;
      margin: 0 auto;
      font-family: 'Roboto', 'Helvetica Neue LT Std', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
      font-size: 1em;
    }
    
    #workskin .snp-header {
      width: auto;
      height: 60px;
      padding-left: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ababab;
    }
    
    #workskin .snp-avatar {
      width: 40px;
      border-radius: 50%;
      float: left;
      margin-top: -5px;
    }
    
    #workskin .snp-contact {
      font-weight: bold;
      font-size: 20px;
      padding-left: 15px;
      top: -20px;
      position: relative;
    }
    
    #workskin .snp-body {
      padding: 10px;
      padding-top: 0px;
      overflow: auto;
      width: auto;
      max-height: 600px;
    }
    
    #workskin .snp-name-yellow {
      color: #ecdd46;
    }
    
    #workskin .snp-msg-yellow,
    #workskin .snp-img-yellow {
      border-left: 4px solid #ecdd46;
    }
    
    #workskin .snp-name-green {
      color: #66b28b;
    }
    
    #workskin .snp-msg-green,
    #workskin .snp-img-green {
      border-left: 4px solid #66b28b;
    }
    
    #workskin .snp-name-blue {
      color: #50bfe5;
    }
    
    #workskin .snp-msg-blue,
    #workskin .snp-img-blue {
      border-left: 4px solid #50bfe5;
    }
    
    #workskin .snp-name-red {
      color: #e0496f;
    }
    
    #workskin .snp-msg-red,
    #workskin .snp-img-red {
      border-left: 4px solid #e0496f;
    }
    
    #workskin .snp-img-blue,
    #workskin .snp-img-green,
    #workskin .snp-img-red,
    #workskin .snp-img-yellow {
      max-width: 300px;
      padding-left: 5px;
    }
    
    #workskin .snp-name-green,
    #workskin .snp-name-red,
    #workskin .snp-name-blue,
    #workskin .snp-name-yellow {
      font-weight: bold;
      text-transform: uppercase;
      font-size: 0.8em;
    }
    
    #workskin .snp-msg-green,
    #workskin .snp-msg-red,
    #workskin .snp-msg-blue,
    #workskin .snp-msg-yellow {
      padding-left: 5px;
    }
    
    #workskin .snp-timestamp {
      font-weight: bold;
      text-transform: uppercase;
      font-size: 0.8em;
      color: #757575;
      text-align: center;
      margin-bottom: -20px;
    }
    
    #workskin .snp-bottom {
      background-image: url('https://i.imgur.com/7mkPQ7p.png');
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      overflow: hidden;
    }
    
    #workskin ::-webkit-scrollbar {
      width: 10px;
    }
    
    #workskin ::-webkit-scrollbar-track {
      background: none;
    }
    
    #workskin ::-webkit-scrollbar-thumb {
      background: rgba(0,0,0,0.5);
      border-radius: 10px;
    }
    
    #workskin ::-webkit-scrollbar-thumb:hover {
      background: rgba(0,0,0,0.7);
      border-radius: 10px;
    }

# Step 2: Adding Work Skin to your work

In order to use this workskin, you must first add it to your work. Create a new work or edit an existing one. Under 'Associations', at 'Select Work Skin', select the workskin you just imported. Now you can use it. You have to edit your chapters in HTML mode when you use a workskin. It is **strongly advised** to add these codes after you have completed your story. This is to minimize the chances of the code being messed up by the editor.

## Without scroll

If you do not want the scroll effect, and instead want your chat messages to go down the entire screen, simply remove this one line from the workskin:

## Without bottom bar

If you do not want the bottom bar, simply delete this line from the bottom of the HTML code:

## Simple text

A simple chat between two persons

  
  
Naruto Uzumaki   


naruto  
hey there sakura 😏  
  
sakura  
what do you want naruto?  
  


HTML:
    
    
    <div class="snp-box"><p></p>
    <div class="snp-header">
    <img class="snp-avatar" src="https://i.imgur.com/ZoNVdkD.jpg" />
    <span class="snp-contact">Naruto Uzumaki</span>
    </div>
    <div class="snp-body">
    
    <p><span class="snp-name-blue">naruto</span><br />
    <span class="snp-msg-blue">hey there sakura 😏</span><br />
    <br />
    <span class="snp-name-red">sakura</span><br />
    <span class="snp-msg-red">what do you want naruto?</span><br />
    <br />
    </p>
    </div>
    <div class="snp-bottom">&nbsp</div>
    </div>

Explanation:

**snp-avatar** is the avatar of your contact  
**snp-contact** is the name of the contact  
**snp-name-blue** is the name of the sender with highlight color blue  
**snp-msg-blue** is the message of the sender with highlight color blue  
etc.

## Group chat

Chat between multiple people. Each person gets their own color. This workskin comes with 4 colors (red, blue, yellow, green), but you can add any number of colors yourself. Make sure to change snp-name-[color], snp-msg-[color], and snp-img-[color] accordingly at every new 'chat bubble'!

  
  
Team 7   


14 june, 2019

sakura  
hello everyone!  
  
naruto  
sakura-chan, see we're perfect for each other!  
  
  
kakashi  
did you just cut me off?!  
  
sasuke  
hmpf  
  


20 june, 2019

naruto  
i-i didn't mean to kakashi-sensei!  


HTML:
    
    
    <div class="snp-box"><p></p>
    <div class="snp-header">
    <img class="snp-avatar" src="https://i.imgur.com/T4kUTXn.png" />
    <span class="snp-contact">Team 7</span>
    </div>
    <div class="snp-body">
    
    <div class="snp-timestamp"><p>14 june, 2019</p></div>
    
    <p><span class="snp-name-yellow">sakura</span><br />
    <span class="snp-msg-yellow">hello everyone!</span><br />
    <br />
    <span class="snp-name-red">naruto</span><br />
    <span class="snp-msg-red">sakura-chan, see we're perfect for each other!</span><br />
    <img class="snp-img-red" src="https://i.imgur.com/cS8zaCw.png" /><br />
    <br />
    <span class="snp-name-green">kakashi</span><br />
    <span class="snp-msg-green">did you just cut me off?!</span><br />
    <br />
    <span class="snp-name-blue">sasuke</span><br />
    <span class="snp-msg-blue">hmpf</span><br />
    <br />
    </p>
    
    <div class="snp-timestamp"><p>20 june, 2019</p></div>
    
    <p><span class="snp-name-red">naruto</span><br />
    <span class="snp-msg-red">i-i didn't mean to kakashi-sensei!</span><br />
    </p>
    </div>
    <div class="snp-bottom">&nbsp</div>
    </div>

Explanation:

**snp-img-red** is if you want to add an image with highlight red  
**snp-timestamp** is for adding a timestamp before a message

## Using the timestamp

If you want to add a timestamp, use this code. Make sure that it is positioned before the next 'chat bubble'.
    
    
    <div class="snp-timestamp"><p>14 june, 2019</p></div>

## Adding colors

Adding colors is easy. There are two steps.  
First, add this code to the workskin, change [color] to the color you are adding, and pick your HEX color:
    
    
    #workskin .snp-name-[color] {
      color: [hex-color];
    }
    
    #workskin .snp-msg-[color],
    #workskin .snp-img-[color] {
      border-left: 4px solid [hex-color];
    }

Then, add your snp-name-[color], snp-msg-[color], and snp-img-[color] to their corresponding places, in the same way that the existing colors are stacked, in the workskin:

## Final Notes

That's it, I hope it was clear! If you have any bugs/questions/suggestions, please let me know!


End file.
